<template>
  <div class="essayItem">
    <van-row>
      <van-col span="4"><img :src="essay.photo"/></van-col>
      <van-col span="8"><h3>{{ essay.name }}</h3></van-col>
    </van-row>

<!--    <p>{{ essay.name }}</p>-->
    <h3>{{ essay.title }}</h3>
    <p>{{ essay.text }}</p>

    <div class="clicks">
      <van-row justify="space-between">
        <van-col span="12">
          <!-- 标签 -->
          <van-row justify="space-between">
            <van-col v-for="n in essay.labels" :key=n>
              <van-tag plain type="primary">
                {{ n }}
              </van-tag>
            </van-col>
          </van-row>
        </van-col>
        <!-- 点赞 -->
        <van-col span="7">
          <van-row justify="space-between">
            <van-col>
              <!-- 点赞 -->
              <van-icon name="like-o"
                        size="16"
                        @click="likeClick"
                        :color="likeNum?'#F1050A':''"/>
              <transition @before-enter="beforeEnter"
                          @enter="enter"
                          @after-enter="afterEnterLike">
                            <span class="addOne"
                                  v-if="isLike">+1</span>
              </transition>
              {{ likeNum }}
            </van-col>
            <van-col>
              <!-- 收藏 -->
              <van-icon name="star-o"
                        size="16"
                        @click="starClick"
                        :color="starNum?'#F1050A':''"/>
              <transition @before-enter="beforeEnter"
                          @enter="enter"
                          @after-enter="afterEnterStar">
                            <span class="addOne"
                                  v-if="isStar">+1</span>
              </transition>
              {{ starNum }}
            </van-col>
            <van-col>
              <!-- 我也要去 -->
              <van-icon name="todo-list-o" size="18" @click="list"/>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <van-field
        v-model="message"
        rows="1"
        autosize
        label="评论"
        label-width="2.2rem"
        label-align="left"
        type="textarea"
        placeholder="请输入评论"
    />
    <hr>
  </div>
</template>

<script>
export default {
  name: "essayItem",
  data() {
    return {
      photo: null,
      message: null,
      likeNum: "",//点赞数
      isLike: false,
      starNum: "",
      isStar: false,
    };
  },
  props: ["essay"],
  methods: {
    beforeEnter(el) {
      //动画开始进入前
      el.style.transform = 'translate(0,0)'
    },
    enter(el, done) {
      //动画执行时
      el.offsetWidth
      el.style.transform = 'translate(10px,-22px)'
      el.style.transition = 'all 0.6s ease'
      done()
    },
    afterEnterLike() {
      let that = this
      //点赞动画结束时
      that.isLike = !that.isLike
    },
    afterEnterStar() {
      let that = this
      // 点击收藏动画结束时
      that.isStar = !that.isStar
    },
    likeClick() {
      let that = this
      // 点赞
      that.isLike = true
      that.likeNum++
    },

    starClick() {
      let that = this
      // 收藏
      that.isStar = true
      that.starNum++
    },
    comment() {
      // 评论
    },
    list() {
      // 加入计划列表
    },
  }
};
</script>

<style scoped>
.essayItem {
  padding: 0 13px;
}

.tags {
  text-align: center;
}

.clicks {
  padding: 10px 0;
  position: relative;
}

.addOne {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  color: #F1050A;
}
</style>
